<template>
  <div class="bigBox bg-f2">
    <div class="bg-fff">
      <el-breadcrumb separator-class="el-icon-arrow-right" class="pAll">
        <el-breadcrumb-item><span @click="goBack">菜单管理</span></el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form class="pAll" :model="ruleForm" :rules="rules" ref="menuForm" label-width="200px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单名称：" prop="name">
              <el-input v-model.trim="ruleForm.name" clearable placeholder="请输入内容" class="menuName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="菜单级别：" prop="levelOptionVal">
              <el-select :disabled="Number(operating) === 1" class="w100" v-model="ruleForm.levelOptionVal" placeholder="请选择" @change="levelChange" clearable>
                <el-option v-for="item in menuLevelOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="ruleForm.levelOptionVal > 1">
          <el-col :span="12">
            <el-form-item label="上级目录：" prop="name">
              <el-select class="w100" v-model="ruleForm.parentOptionVal" placeholder="请选择" clearable :disabled="Number(operating) === 1">
                <el-option v-for="item in menuParentOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="按钮权限" prop="qxdm" v-if="ruleForm.levelOptionVal === 4">
              <el-input v-model.trim="ruleForm.qxdm" clearable placeholder="请输入内容" class="menuName"></el-input>
            </el-form-item>
            <el-form-item prop="fwlj" v-else>
              <span slot="label">
                访问路径
                <el-tooltip class="item" effect="dark" content="第二级菜单路径需要加/" placement="top">
                  <span><i class="el-icon-question"></i></span>
                </el-tooltip>
                ：
              </span>
              <el-input v-model.trim="ruleForm.fwlj" @keyup.native="ruleForm.fwlj = ruleForm.fwlj.replace(/[^a-zA-Z\/]/g, '')" clearable placeholder="请输入内容" class="menuName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="排序：" prop="num">
              <el-input-number v-model="ruleForm.num" :min="1" label=""></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="ruleForm.levelOptionVal === 1">
          <el-col :span="12">
            <el-form-item label="菜单图标：" prop="name">
              <ul class="iconList">
                <li :class="menuIconActive == index ? 'active' : ''" v-for="(item, index) in menuIcon" :key="index" @click="selectMenuIcon(index)">
                  <svg class="iconfont" aria-hidden="true">
                    <use :xlink:href="`#el-icon-my${item}`" />
                  </svg>
                  <i class="el-icon-success selectIcon"></i>
                </li>
              </ul>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="fooer_btn">
          <el-button size="medium" @click="goBack" v-preventReClick class="btnSizeStyle">取 消</el-button>
          <el-button size="medium" class="btnSizeStyle" :loading="btnLoad" type="primary" @click="submitBtn(title)" v-preventReClick>保 存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { pinT } from '@/utils/allUrl.js'
import { timeLoad } from '@/assets/js/setTime'
export default {
  data() {
    return {
      title: '',
      operating: '', // 0-新增  1-编辑
      btnLoad: false,
      btnLoadTimer: null,
      ruleForm: {
        id: '',
        name: '', // 菜单名称
        levelOptionVal: '', // 菜单级别
        parentOptionVal: '', // 上级目录
        fwlj: '', // 访问路径
        num: '', // 排序
        qxdm: '', // 按钮权限
      },
      rules: {
        name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        fwlj: [{ required: true, message: '请输入访问路径', trigger: 'blur' }],
        levelOptionVal: [{ required: true, message: '请选择菜单级别', trigger: 'change' }],
        parentOptionVal: [{ required: true, message: '请选择上级目录', trigger: 'change' }],
        num: [{ required: true, message: '请输入排序', trigger: 'blur' }],
      },
      menuLevelOptions: [
        { value: 1, label: '一级菜单' },
        { value: 2, label: '二级菜单' },
        { value: 3, label: '三级菜单' },
        { value: 4, label: '按钮' },
      ],
      menuIconActive: 0, // 默认选择第一个图标
      menuParentOptions: [], // 上级目录
      menuIcon: ['comprehensive-monitoring', 'inspection_center', 'business_center', 'asset_center', 'business_report', 'knowledge_base', 'platform_configuration', 'engineering', 'alarm'],
    }
  },
  watch: {
    btnLoad(newVal, oldVal) {
      this.btnLoadTimer = setTimeout(() => {
        if (this.btnLoad) {
          this.btnLoad = false
        }
      }, timeLoad)
    },
  },
  created() {},
  mounted() {
    const { title, type } = this.$route.query
    this.title = title
    this.operating = type
    if (type === 1) {
      this.initData()
    }
  },
  methods: {
    async initData() {
      const params = new URLSearchParams()
      params.append('id', this.$route.query.id)
      const { data: res } = await this.$http.post(`${pinT}menu/getMenuManagement`, params)
      console.log(res)
      switch (res.code) {
        case '0000':
          this.menuIcon.forEach((item, index) => {
            if (item === res.data.tp) {
              this.menuIconActive = index
            }
          })
          this.ruleForm.id = res.data.id
          this.ruleForm.levelOptionVal = res.data.lx // 菜单级别
          if (this.ruleForm.levelOptionVal > 1) {
            this.getParentMenu(res.data.fqxid)
          }
          this.ruleForm.name = res.data.qxmc // 菜单名称
          this.ruleForm.fwlj = res.data.qxfwlj // 访问路径
          this.ruleForm.num = res.data.px // 排序
          this.ruleForm.qxdm = res.data.qxdm
          break
        default:
          break
      }
    },
    // 菜单级别改变
    levelChange() {
      this.ruleForm.parentOptionVal = ''
      this.menuParentOptions = []
      if (this.ruleForm.levelOptionVal > 1) {
        this.getParentMenu()
      }
    },
    // 图标改变的值
    selectMenuIcon(index) {
      this.menuIconActive = index
    },
    //   获取上级目录
    async getParentMenu(fqxid) {
      this.menuParentOptions = []
      const ids = []
      // 获取ids 菜单级别为二级时,只需要传[1],三级传[1,2]
      for (let i = 1; i < this.ruleForm.levelOptionVal; i++) {
        ids.push(i)
      }
      const params = new URLSearchParams()
      params.append('ids', ids)
      const { data: res } = await this.$http.post(`${pinT}menu/selectMenuManagement`, params)
      switch (res.code) {
        case '0000':
          res.data.forEach((item) => {
            // 选择二级菜单
            if (this.ruleForm.levelOptionVal === 2) {
              this.menuParentOptions.push({
                value: item.id,
                label: item.qxmc,
              })
            }
            // 选择三级菜单
            if (item.subsetList) {
              item.subsetList.forEach((jtem) => {
                if (this.ruleForm.levelOptionVal === 3) {
                  this.menuParentOptions.push({
                    value: jtem.id,
                    label: `${item.qxmc}/${jtem.qxmc}`,
                  })
                }
                //   选择四级菜单
                if (jtem.subsetList) {
                  jtem.subsetList.forEach((ktem) => {
                    if (this.ruleForm.levelOptionVal === 4) {
                      this.menuParentOptions.push({
                        value: ktem.id,
                        label: `${item.qxmc}/${jtem.qxmc}/${ktem.qxmc}`,
                      })
                    }
                  })
                }
              })
            }
          })
          if (fqxid) {
            this.ruleForm.parentOptionVal = Number(fqxid) // 上级目录
          }
          break
        default:
          break
      }
    },
    goBack() {
      this.$router.push({
        name: 'menuList',
      })
    },
    // 保存
    submitBtn() {
      var that = this
      this.$refs.menuForm.validate((valid) => {
        if (!valid) {
          return
        }
        clearTimeout(this.btnLoadTimer)
        this.btnLoad = true
        if (this.operating === 0) {
          // 新增
          that.addMenu()
        } else {
          that.editMenu()
        }
      })
    },
    async addMenu() {
      const params = new URLSearchParams()
      const { name, levelOptionVal, parentOptionVal, fwlj, num } = this.ruleForm
      params.append('QXMC', name) // 菜单名称
      params.append('QXMS', '')
      params.append('BXBS', 0)
      params.append('LX', levelOptionVal) // 菜单级别
      params.append('QXFWLJ', fwlj) // 权限访问路径
      params.append('ZT', 1)
      if (levelOptionVal === 1) {
        params.append('FQXID', 0) // 上级目录
        params.append('TP', this.menuIcon[this.menuIconActive]) // 图片
      } else {
        params.append('FQXID', parentOptionVal) // 上级目录
      }
      params.append('QXDM', 'A')
      params.append('PX', num) // 排序
      const { data: res } = await this.$http.post(`${pinT}menu/insertMenuManagement`, params)
      this.btnLoad = false
      switch (res.code) {
        case '0000':
          this.$message.success(res.message)
          this.goBack()
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
    async editMenu() {
      const params = new URLSearchParams()
      const { name, levelOptionVal, parentOptionVal, fwlj, num } = this.ruleForm
      params.append('QXMC', name) // 菜单名称
      params.append('QXMS', '')
      params.append('BXBS', 0)
      params.append('LX', levelOptionVal) // 菜单级别
      params.append('QXFWLJ', fwlj) // 权限访问路径
      params.append('ZT', 1)
      if (levelOptionVal === 1) {
        params.append('FQXID', 0) // 上级目录
        params.append('TP', this.menuIcon[this.menuIconActive]) // 图片
      } else {
        params.append('FQXID', parentOptionVal) // 上级目录
      }
      params.append('QXDM', 'A')
      params.append('PX', num) // 排序
      params.append('ID', this.ruleForm.id)
      const { data: res } = await this.$http.post(`${pinT}menu/updateMenuManagement`, params)
      this.btnLoad = false
      console.log(res)
      switch (res.code) {
        case '0000':
          this.$message.success(res.message)
          this.goBack()
          break
        default:
          this.$message.error(res.message)
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.bigBox {
  .w100 {
    width: 100%;
  }
  .menuName {
    // width: 300px;
  }
  .el-row {
    .title {
      display: block;
      height: 38px;
      line-height: 38px;
      color: rgba(89, 89, 89, 1);
      font-size: 15px;
      font-weight: 600;
    }
  }
  .fooer_btn {
    border-top: 1px solid #e5e5e5;
    padding-top: 20px;
    margin: 15px 0;
    display: flex;
    justify-content: flex-end;
  }
  .el-input-number {
    line-height: 33px;
  }
  .iconList {
    > li {
      float: left;
      position: relative;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 1px solid #e5e5e5;
      > .iconfont {
        vertical-align: middle;
        width: 80px;
        height: 80px;
      }
      .selectIcon {
        display: none;
        position: absolute;
        right: 10px;
        bottom: 10px;
        color: #3f92ff;
      }
      &.active {
        border: 1px solid #409eff;
        .selectIcon {
          display: inline-block;
        }
      }
    }
  }
}
</style>
